<template>
  <div class="f-aroundX container">
    <div class="f-columnY item">
      <h4 class="title">任 务</h4>
      <ul class="f-flex1 list">
        <el-scrollbar style="height:100%" class="scrollbar-x">
          <router-link to="/devops/maintain">
            <li class="primary list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00需完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="warning list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00工单即将到期，请尽快完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="danger list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已超时</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
          <router-link to="/devops/maintain">
            <li class="success list-item">
              <p class="list-item-title">1号楼1单元201需要去修水管，2022.3.9 16:00:00已成功完成</p>
              <p class="list-item-date">2022.3.9 14:55:00</p>
            </li>
          </router-link>
        </el-scrollbar>
      </ul>
    </div>
    <div class="item">
      <h4 class="title">审 批</h4>
    </div>
    <div class="item">
      
      <h4 class="title">消 息</h4>
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  .item {
    margin: 10px 0;
    width: 25%;
    border: 1px solid #ebeef5;
    .title {
      height: 60px;
      background: #DCDFE6;
      font-size: 16px;
      font-weight: bolder;
      line-height: 60px;
      text-align: center;
    }
    .list {
      overflow: hidden;
      .list-item {
        margin: 15px 0px;
        padding: 15px 20px;
        line-height: 22px;
        // box-shadow: 0px 0px 8px #209fff;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        .list-item-title {
          widows: 100%;
        }
        .list-item-date {
          text-align: right;
        }
      }
    }
  }
}
</style>
